<template>
<div>
  <head title="After sale"></head>
  <scroller class="scroller">
    <div
      v-for="(list, index2) in orderList"
      :key="index2"
      class="listItem"
      @loadmore="onloadmore"
      loadmoreoffset="200"
      :show-scrollbar="false"
      @click="push('root:app/user/order_list/refundDetail.js',{goodInfo:list})"
    >
      <div class="titList">
        <div class="titLeft">
          <text class="titname">{{list.title}}</text>
        </div>
        <text class="status"></text>
      </div>
      <div class="titList bb">
        <image class="imgList" :src="list.thumb" />
        <div class="bottomList">
          <text class="num">{{list.number}} item</text>
          <div class="num-info">
            <text class="total">Total</text>
            <text class="symbol">AU$</text>
            <text class="money">{{list.price}}</text>
          </div>
        </div>
      </div>
    </div>

    <empty v-if="orderList.length==0&&!isLoading" tips="Your order is empty"></empty>
  </scroller>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>
<script>
import { get_refundList } from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";

export default {
  data() {
    return {
      users_id: "",
      orderList: [],
      page: 1,
      hasMore: true
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.users_id = userId;
      this.getOrderList();
    });
  },
  methods: {
    onloadmore() {
      if (this.hasMore) {
        this.getOrderList();
      }
    },
    getOrderList() {
      this.isLoading = true;
      get_refundList(
        {
          users_id: this.users_id,

          page: this.page,
          page_num: 10
        },
        (res, flag) => {
          this.isLoading = false;
          
          if (flag) {
            if (res.code == 200) {
              this.page++;
              if (this.page == 1) {
                this.orderList = res.data.list;
              } else {
                this.orderList = this.orderList.concat(res.data.list);
              }
              if (this.orderList.length == res.total) {
                this.hasMore = false;
              }
            }
          }
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
.scroller {
  flex: 1;
  width: 750px;
  background-color: #f2f2f2;
}
.listItem {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 32px;
  width: 750px;
}

.listItem:active {
  background-color: #f2f2f2;
}
.titList {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.bb {
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.imgList {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f2f2f2;
}

.titLeft {
  flex-direction: row;
  align-items: center;
}

.titname {
  font-size: 28px;
  color: #333;
  margin-right: 20px;
}
.iconfont {
  font-family: iconfont;
}

.titIcon {
  width: 60px;
  font-size: 24px;
  color: #999999;
}

.imgIcon {
  font-size: 32px;
  color: #999999;
}

.status {
  font-size: 28px;
  color: #ec414d;
}

.bottomList {
  align-items: flex-end;
}

.num {
  font-size: 22px;
  color: #8e8e93;
  text-align: right;
  padding-bottom: 20px;
  &-info {
    flex-direction: row;
    align-items: center;
  }
}

.total {
  font-size: 22px;
  color: #8e8e93;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin: 0 8px;
}

.money {
  font-size: 28px;
  color: #ec414d;
}
.actionBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
}

.actionItem {
  font-size: 28px;
  color: #ba8833;
  line-height: 48px;
  border-width: 1px;
  border-style: solid;
  border-color: #c79f5b;
  text-align: center;
  width: 200px;
  height: 48px;
  &:active {
    background-color: #c79f5b;
  }
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
</style>